<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

     <div style="width: 300px;
        margin-top:150px;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 50px;">
        <div id="clock">
            --:--:--
        </div>
     </div>

     <script>
         function kata(){
             //获取现在的时间
             var date= new Date();
             var h=date.getHours();
             var m=date.getMinutes();
             var s=date.getSeconds();

             //把时间加起来准备放到页面上面
             var time= h+":"+m+":"+s;

            //获取元素
             var clock=document.getElementById("clock");

            //放置文字
             clock.innerText=time;
         }

         kata()
         setInterval(kata,1000)


     </script>

</body>
</html>